<template>
	<view class="page">
    <view class="news_detail" >
      <view class="top">
          <text class="title">{{news.title}}</text>
          <view class="info"><text>发布时间:{{news.data}}</text></view>
      </view>
      <view class="line"></view>
		  <view class="main">
        <u-parse :content="news.content"></u-parse>
        <view class="line"></view>
        <view class="mainTitie">评论区<u-icon @click="mainBoxOpen" class="mainTitleIcon" size="26px" name="arrow-down"></u-icon></view>
        <view class="mainBox" v-show="isHide">
          <view  class="mainBoxBody" v-for="(item,index) in speak" :key="index">
            <view class="mainBoxBody-item">
              {{ item.name }}:<view>{{ item.speak }}</view>
            </view>
          </view>
          <view class="line" ></view>
          <u--textarea v-model="speaking" placeholder="请文明发言" count height="300rpx" ></u--textarea>
          <button class="mainBoxBtn"     @click="toSpeak">提交</button>
          <button class="mainBoxBtn"   @click="toRecycle">去助力</button>  
        </view>
		  </view>
		</view>
	</view>
</template>

<script>
import {baseUrl} from '@/config'
export default {

	data() {
		return {
      isHide:false,
      userinfo:[],
      news:[],
      index:0,
      nid:0,
      id:0,
      speak:[],
      speaking: '',
		};
	},
  onLoad(Option){
        this.nid = Option.nid
    },
async	onShow() {
    this.userinfo =  uni.getStorageSync('user').data[0]
    await this.getNews()
    this.getNewsSpeak()
	},
	methods: {
    mainBoxOpen(){
      this.isHide = !this.isHide
    },
    toRecycle(){
      uni.showToast({
          title: '感谢你的爱心',
              duration: 1000
            });
          setTimeout(function() {
            uni.reLaunch({
              url: '/pages/recycle/index'
            });
            }, 1500)
    },
    toSpeak(){
      console.log(this.id);
      uni.request({
          url:baseUrl+"/v1/news/nspeakAllAdd",
          method: 'POST',
          header: {
						'Content-Type': 'application/x-www-form-urlencoded'
					},
 					data: {
 						nid: this.id,
            name:this.userinfo.username,
            speak:this.speaking
 					},
          success:()=>{
            this.getNewsSpeak()
          }
 				})
        this.speaking = ''
      
    },
   async getNews(){
    this.id = this.nid
     let r = await uni.request({
        url: baseUrl+'/v1/news/idSearch', 
        data:{
          nid:this.nid
        }
      });
      let res  = r[1]  
      this.news = res.data.data[0]
    },
    getNewsSpeak(){
      uni.request({
        data: {
          nid : this.nid
        }, 
        url: baseUrl+'/v1/news/nspeakClassSearch', 
        success: (res) => {
          this.speak = res.data.data

        }
      });
    }
	}
};
</script>

<style lang="scss" scoped>
  .news_detail{
      font-size: 30rpx;
      padding: 20rpx 20rpx;
    .top{
      .title{
        font-size: 50rpx;
        display: block;
        margin: 20rpx 0;
        text-align: center;
            }
      .info{
        display: flex;
        justify-content:space-between;
        font-size: 35rpx;
        float: right;
           }
    }
    .line {
		height: 10rpx;
		width: 100vw;
		background: #eee;
    margin: 10px 0;
	  }
    .main{
      margin-top: 30px;
      .mainTitie{
          font-size: 35rpx;
          text-align: center;
          margin-bottom: 10px;
          .mainTitleIcon{
            float: right;
          }
        }
      .mainBox{
        margin-top: 20rpx;
        padding: 10px;
        .mainBoxBody{
          margin-bottom: 10rpx;
          .mainBoxBody-item{
            border: 1px solid #66700e;
            border-radius: 20px;
            padding: 10rpx 10rpx;
          }
        }
        .mainBoxBtn{
        width: 50vw;
        margin-top: 20rpx;
        }
      }
    }
}

</style>
